import { GetProListByMuCond } from '@/api/project';
import { getSceneList } from '@/api/scene';
import { PaginationLayout } from '@/views/enum/common';
import { useRequest } from '@jl/common/composable';
import {
  IColumnConfig,
  IFormConfig,
  IFormData,
  IFormItemConfig,
  IJLDatagridInstance,
  IJlFormInstance,
  IPageConfig,
  ITableConfig,
} from '@jl/element-plus';

const { run, data } = useRequest<any, API.Scene.SceneListItem[]>(getSceneList, {
  list: [],
  count: 0,
});
const { run: proListRun, data: proData } = useRequest<any, any>(GetProListByMuCond, {
  list: [],
  count: 0,
});

const tableData = computed(() => {
  return data.value.list;
});
const proListData = computed(() => {
  return proData.value.list || [];
});

export function list() {
  const formRef = ref<IJlFormInstance>();

  const formConfig: IFormConfig = { gutter: 10, labelWidth: 80 };
  const formData = ref<IFormData>({
    blurName: '',
    projectId: undefined,
  });

  const formItemConfig = computed<IFormItemConfig>(() => [
    {
      type: 'input',
      key: 'blurName',
      label: '场景名称',
      span: 5,
      clearable: true,
      placeholder: '请输入场景名称',
      emits: new Set(['change']),
      optionsWithAll: true,
    },

    {
      type: 'select',
      key: 'projectId',
      label: '所属项目',
      span: 5,
      clearable: true,
      placeholder: '请选择',
      options: [],
      optionsWithAll: true,
    },
    {
      type: 'slot',
      slotName: 'searchSlot',
      key: 'search',
      label: '',
      span: 5,
      labelWidth: 10,
    },
  ]);

  const tableRef = ref<IJLDatagridInstance>();

  const tableConfig = ref<ITableConfig>({
    index: false,
    selection: false,
  });

  const pageConfig = ref<IPageConfig>({
    small: false,
    visible: true,
    layout: PaginationLayout,
    total: 0,
    pageSize: 6,
    currentPage: 1,
    pageSizes: [6, 15, 30, 60, 100],
    background: true,
  });

  const tableColumn = ref<IColumnConfig[]>([
    { label: '序号', prop: 'id', width: '80px' },
    { label: '资源封面', prop: 'resCover' },
    { label: '资源名称', prop: 'fileResName' },
    {
      label: '数据格式',
      prop: 'fileType',
      slotName: 'slotCurrentNodeTypeCode',
    },
    {
      label: '数据大小',
      prop: 'fileSize',
    },
    { label: '处理状态', prop: 'currentNodeReadyTime' },
    { label: '访问次数', prop: 'currentNodeBeginHandleTime' },
    { label: '添加人', prop: 'currentNodeHandleExpiration' },
    { label: '添加时间', prop: 'finishTime' },
    { label: '操作', prop: 'operation', fixed: 'right', slotName: 'slotOperation' },
  ]);
  async function search(flag = false) {
    if (flag) {
      pageConfig.value.currentPage = 1;
    }
    const searchParam = {
      params: {
        index: pageConfig.value.currentPage,
        pageSize: pageConfig.value.pageSize,
        blurName: formData.value.blurName,
        projectId: formData.value.projectId || '',
      },
    };
    await run(searchParam);
    pageConfig.value.total = data.value.count;
  }
  function pageSizeChange(size: number) {
    pageConfig.value.pageSize = size;
    search();
  }
  function pageCurrentChange(page: number) {
    pageConfig.value.currentPage = page;
    search();
  }

  watch(
    () => proListData.value,
    () => {
      formItemConfig.value[1].options = proListData.value.map((item: any) => {
        return {
          label: item.projectName,
          value: item.projectId,
        };
      });
    },
    {
      deep: true,
    }
  );
  return {
    formRef,
    formConfig,
    formData,
    formItemConfig,
    tableRef,
    pageConfig,
    tableConfig,
    tableColumn,
    tableData,
    search,
    pageCurrentChange,
    pageSizeChange,
    proListRun,
    proListData,
  };
}
